<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>notice-vue</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div id="app" class="container">
    <h1>通告管理客户端技术实现(Bootstarp/Vue.js/Axios)</h1>
    <div v-show="listNoticeDiv" align="center"><!--内容列表区-->
        <form id="queryForm" style="display: inline">
            <input type="text" name="title" id="title" placeholder="请输入标题">
            <input type="button" value="查询" @click="doQueryNotices">
        </form>
        <button @click="doShowOrHide">添加</button>
        <table class="table">
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(n,i) in notices" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{n.title}}</td>
                    <td>{{n.type=="1"?"通知":"公告"}}</td>
                    <td>{{n.status=="0"?"正常":"关闭"}}</td>
                    <td>{{n.createdTime}}</td>
                    <td><button class="btn btn-warning btn-xs" @click="doDeleteById(n.id)">删除</button>
                        <button class="btn btn-success btn-xs" @click="doFindById(n.id)">修改</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--分页DIV-->
    <div class="pagination">
        <button class="pre" @click="doJumpToPage">上一页</button>
        <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
        <button class="next" @click="doJumpToPage">下一页</button>
        <form id="pageForm" style="display: inline">
            <input type="text" name="pageCurrent" id="pageNumId">
            <input type="button" value="跳转" class="jump" @click="doJumpToPage">
        </form>
    </div>

    <div v-show="editNoticeDiv" style="display: none">
        <form id="noticeEditForm">
            <input type="hidden" id="id" v-model="id">
            <div class="form-group">
                <label for="typeId" >类型:</label>
                <select class="form-control" v-model="type" id="typeId">
                    <option value="1">通知</option>
                    <option value="2">公告</option>
                </select>
            </div>
            <div class="form-group">
                <label for="tId">标题:</label>
                <input type="text" v-model="title" class="form-control" id="tId" placeholder="title">
            </div>
            <div class="form-group">
                <label for="contentId">内容:</label>
                <textarea class="form-control" v-model="content" rows="3" id="contentId">
                   </textarea>
            </div>
            <div class="form-group">
                <label>状态:</label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="0" checked> 正常
                </label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="1"> 关闭
                </label>
            </div>
            <button type="button" class="btn btn-primary submit" @click="doSaveOrUpdate">Submit</button>
            <button type="button" class="btn btn-primary cancel" @click="doShowOrHide">Cancel</button>
        </form>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        var vm = new Vue({
            el:"#app",//定义监控点，vue底层会基于此监控点在内存中构建dom树
            data:{//此对象中定义页面上要操作的数据
                notices:[],
                id:"",
                content: "",
                title:"",
                type: 1,
                status: 0,
                pageCurrent: 1,
                pageCount: 0,
                listNoticeDiv: true,
                editNoticeDiv: false
            },
            methods:{//此位置定义所有业务事件处理函数
                doShowOrHide(){
                    this.listNoticeDiv=!listNoticeDiv,
                    this.editNoticeDiv=!editNoticeDiv
                },

                // doCancel(){
                //     this.listNoticeDiv=true,
                //     this.editNoticeDiv=false
                // },

                doFindById(id){
                    //1.基于id查找通告信息
                    let url=`http://localhost/notice/${id}`;
                    axios.get(url).then((response)=>{
                        let result = response.data;
                        if(result.state==1){
                            //修改vue对象中data(model)属性的值
                            this.id=result.data.id;
                            this.title=result.data.title;
                            this.type=result.data.type;
                            this.content=result.data.content;
                            this.status=result.data.status;
                            this.doShowOrHide();
                        }else{
                            alert("可能记录已经被删除");
                        }
                    })
                },

                doSaveOrUpdate(){
                    //1.定义请求url
                    let url="http://localhost/notice/";
                    //2.定义请求的参数
                    let params={
                        "id":this.id,
                        "title":this.title,
                        "type":this.type,
                        "content":this.content,
                        "status":this.status
                    };
                    axios({
                        method: this.id?"put":"post",
                        url: url,
                        data: params
                    }).then((response)=>{
                        let result=response.data;
                        if(result.state==1){
                            alert(result.message);
                            this.doGetNotices();
                            this.resetForm();
                            this.doShowOrHide();
                        }else{
                            alert(result.message);
                        }
                    })
                },
                resetForm(){
                        this.id="",
                        this.title="",
                        this.type=1,
                        this.content="",
                        this.status=0
                },

                doDeleteById(id){
                    let url = `http://localhost/notice/${id}`;
                    axios.delete(url).then((response)=>{
                        let result = response.data;
                        if (result.state==1){
                            alert(result.message);
                            //let rows = document.querySelector("table>tbody").children.length;
                            let rows = document.querySelectorAll("table>tbody>tr").length;
                            if (this.pageCurrent>1&&this.pageCurrent==this.pageCount&&rows==1){
                                this.pageCurrent--;
                            }
                            this.doGetNotices();
                        }else{
                            alert(result.message);
                        }
                    });
                },

                doQueryNotices(){
                    //1.设置当前页码值
                    this.pageCurrent=1;
                    //执行查询操作
                    this.doGetNotices();
                },

                doJumpToPage(event){//event对象表示事件，基于此对象可以获取
                    //1.获取被点击对象的class属性值(event.target表示获取的对象)
                    let cls = event.target.getAttribute("class");
                    //console.log("cls",cls);
                    //2.基于属性值修改当前页码值
                    if(cls=="pre"&&this.pageCurrent>1){
                        this.pageCurrent--;
                    }else if(cls=="next"&&this.pageCurrent<this.pageCount){
                        this.pageCurrent++;
                    }else if(cls=="jump"){
                        let input = document.querySelector("#pageNumId");//$("#pageNumId")获取pageNumId的值
                        let pageNum = input.value;
                        if(this.pageCurrent>this.pageCount || this.pageCurrent<1){
                            alert("页码值不正确");
                            return;
                        }else{
                            this.pageCurrent = pageNum;
                            this.doGetNotices();
                        }
                    }else{
                        return;
                    }
                    //3.基于新的页码值重新执行查询
                    this.doGetNotices();
                },

                doGetNotices(){
                    // let queryForm = document.querySelector("#queryForm");
                    // let title =queryForm.elements[0].value;
                    let title = document.querySelector("#title").value;
                    //let url = `http://localhost/notice/?pageCurrent=${this.pageCurrent}&title=${title}`;
                    let url = "http://localhost/notice/";
                    axios.get(url,{
                        params: {
                            pageCurrent: this.pageCurrent,
                            title: title
                        }
                    }).then(function(response) {
                        let jsonResult = response.data;
                        //console.log(jsonResult);
                        //设置一个notices[]数组来存放list数组的数据
                        this.vm.notices = jsonResult.data.list;
                        //设置分页初始数据
                        this.vm.pageCurrent = jsonResult.data.pageNum;
                        this.vm.pageCount = jsonResult.data.pages;
                    })
                }
            },
            mounted(){//vue中的一个生命周期函数，此函数在页面元素加载完成后执行
                this.doGetNotices();

            }
        });
    </script>


</body>
</html>